<!-- 游戏水位观察 -->
<template>
  <div class="padding20">
    <!-- 游戏水位曲线 -->
    <div class="border-line" style="margin-bottom: 10px">
      <div class="marginB5 tipsText" style="font-size: 14px;">
       <div class="marginB5" v-show="ArrayExist(data.gameServer,data.query.game_id)">
        游戏所在服：<el-select v-model="data.query.region" placeholder="请选择" filterable @change="getSearchList">
          <el-option v-for="(item,index) in indexStore.serverNameList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
       </div>
        <LargeChart v-loading="indexStore.loading" :chartTitle="selectToLabel(indexStore.gameArray,data.query.game_id,'type','value')==1?'游戏水位曲线(%)':'游戏水位曲线'" :xAxisData="data.waterXAxis" :seriesData="data.waterSeries" />
      </div>
    </div>
    <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize" @changePage="changePage" @search="handleClick(data.echartType)"
       @reset="onHideDetails(true)" @changeTh="data.dialogVisible = true">
      <template #form>
        <Operator ref="OperatorRef" @query="queryItem" :allShow="false"/>
        <GameItem ref="GameItemRef" @query="queryGame" :allShow="false"/>
        <el-form-item label="日期时间：">
          <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
            end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
        </el-form-item>
        <!-- <el-form-item label="玩家投注档位：">
          <el-select v-model="data.query.bet" placeholder="请选择" filterable>
            <el-option v-for="item in data.gearList" :key="item.bet" :label="BigWan(item.bet)" :value="item.bet" />
          </el-select>
        </el-form-item> -->
      </template>
      <template #button></template>
      <template #table>
        <template v-for="(item, index) in data.fields" :key="index">
          <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width">
            <template v-if="item.prop == 'save_time_stamp'" #default="scope">
              {{ setTimestampTime(scope.row.save_time_stamp) }}
            </template>
            <template v-if="item.prop == 'agent_id'" #default="scope">
              {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
            </template>
            <template v-if="item.prop == 'account'" #default="scope">
              <span class="item_details" @click="data.isUserDetails = true, data.checkedItem = scope.row">
                {{ scope.row.account }}
              </span>
            </template>
            <template v-if="item.prop == 'game_id'" #default="scope">
              <GameHeaderInfo :game_id="scope.row.game_id" />
            </template>
            <template v-if="item.prop == 'enter_money'" #default="scope">
            <span :class="colorClass(scope.row.enter_money)">{{BigWan(scope.row.enter_money)}}</span>
          </template>
          <template v-if="item.prop == 'after_settlement_money'" #default="scope">
            <span :class="colorClass(scope.row.after_settlement_money)">{{BigWan(scope.row.after_settlement_money)}}</span>
          </template>
          <template v-if="item.prop == 'bet'" #default="scope">
            <span :class="colorClass(scope.row.bet)">{{BigWan(scope.row.bet)}}</span>
          </template>
          <template v-if="item.prop == 'win_lose'" #default="scope">
            <span :class="colorClass(scope.row.win_lose)">{{BigWan(scope.row.win_lose)}}</span>
          </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="90" align="center">
        <template #default="scope">
            <el-button :disabled="!scope.row.log_details_id && !scope.row.game_type ? true : false" type="primary"
              v-permiss="'/system/destroyManager'" size="small" @click="checkDetails(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </template>
    </SearchTable>
    <!-- 变更表头弹框 -->
    <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="onHideDetails"
      @resetData="resetData"></tableHeader>
    <!-- 游戏详情 -->
    <GameDetail :show="data.isShowDetails" :checkedItem="data.checkedItem" @onHideDetails="onHideDetails"/>
    <!-- 玩家信息详情 -->
    <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import Operator, { type QueryType } from '@/components/FormItem/Operator.vue'
import GameItem, { type GameType } from '@/components/FormItem/GameItem.vue'
import LargeChart from '@/components/Echarts/largeChart.vue'
import UserDetails from '@/views/player/components/user-details.vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import GameDetail from '@/views/player/components/game-details.vue'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import { BigWan, BigMinus,NumberRtpPercent } from '@/utils/math'
import { selectToLabel, colorClass, ArrayExist } from '@/utils/index'
import { getDateDay, setTimeValue, setTimestampTime } from '@/utils/time'
import { getWaterChart, getWaterTable, getWaterGearChart, getWaterChartGear } from '@/api/game'

import { useStore } from '@/stores/index'
const indexStore = useStore()

export interface commercialType {
  value: number
  label: string
}

const data = reactive({
  query: {
    page: 1,
    size: 50,
    agent_id: -1,
    operated_id: -1,
    platform: -1,
    game_id: -1,
    currency_id: -1,
    bet: 0,
    region: '',
    date: [getDateDay(0), getDateDay(0)]
  },
  list: [],
  total: 0,
  fields: [
    { label: '创建时间', prop: 'save_time_stamp', width: '180', visible: true },
    { label: '牌局编号', prop: 'round_id_str', width: '200', visible: true },
    { label: '平台昵称', prop: 'account', width: '200', visible: true },
    { label: '商户昵称', prop: 'agent_id', width: '200', visible: true },
    { label: '游戏名称', prop: 'game_id', width: '200', visible: true },
    { label: '下注前', prop: 'enter_money', width: '200', visible: true },
    { label: '结算后', prop: 'after_settlement_money', width: '200', visible: true },
    { label: '下注金额', prop: 'bet', width: '120', visible: true },
    { label: '玩家输赢', prop: 'win_lose', width: '150', visible: true },
  ],
  checkedItem: {} as any,
  dialogVisible: false,
  isShowDetails: false,
  exportLoading: false,
  isUserDetails: false,
  waterXAxis: [] as any[],
  waterSeries: [] as any[],
  betXAxis: [] as any[],
  betSeries: [] as any[],
  betLegend: [] as any[],
  totalDetails: 0,
  echartType: 1,
  gearList: [] as any[],
  serverNameList: [] as any[],
  gameServer:[100001, 100002, 9]
})

// 商户类别 + 商户
const queryItem = (item: QueryType) => {
  data.query.agent_id = item.agent_id
  data.query.operated_id = item.operated_id
}
// 游戏品牌 + 游戏
const queryGame = (item: GameType) => {
  data.query.platform = item.platform
  data.query.game_id = item.game_id
  // getWaterChartGearList()
}

onMounted(async () => {
  
})

const getSearchList = async () => {
  data.query = setTimeValue(data.query)
  data.waterSeries = []
  data.waterXAxis = []
  if(data.query.agent_id == -1){
    return ElMessage.error('请选择有效商户')
  }
  if(data.query.game_id == -1){
    return ElMessage.error('请选择游戏')
  }
  if(ArrayExist(data.gameServer,data.query.game_id) && !data.query.region){
    return ElMessage.error('请选择服务器')
  }
  indexStore.setPageLoading(true)
  let [chart,table] = await Promise.all([getWaterChart(data.query), getWaterTable(data.query)])
  // 折线图
  chart.data?.forEach((item: any) => {
    data.waterSeries.push(selectToLabel(indexStore.gameArray,data.query.game_id,'type','value')==1?NumberRtpPercent(item.win,item.bet):BigWan(item.water_level))
    data.waterXAxis.push(setTimestampTime(item.date).substring(5,16))
  })
  // 列表
  table.data.list?.forEach((item:any) => {
    item.win_lose= BigMinus(item.win,item.bet) //玩家输赢 = 玩家赢钱 - 玩家下注
  })
  data.list = table.data.list
  data.total = table.data.total
}

// // 下注档位 
// const getWaterChartGearList = async () => {
//   let query = setTimeValue(data.query)
//   if(query.game_id!= -1){
//     let res = await getWaterChartGear(query);
//     data.query.bet = res.data?res.data[0].bet : 0
//     data.gearList = res.data?res.data : []
//   }
// }
const getGearSearchList = async () => {
  let query = setTimeValue(data.query)
  data.betSeries = []
  data.betXAxis = []
  if(query.agent_id == -1){
    return ElMessage.error('请选择有效商户')
  }
  if(!data.query.bet){
    return false
  }
  let chart = await getWaterGearChart(query)
  // 折线图
  let dataList = [] as any[]
  chart.data?.forEach((item:any) => {
    dataList.push(item.count)
    data.betXAxis.push(item.date_str)
  })
  data.betSeries=[{ name: '玩家RTP数据', data: dataList, type: 'line' }]
  data.betLegend=['玩家RTP数据']
}

// 选择游戏tab
const handleClick = async (value:any) => {
  data.echartType = value
  if(value==1){
    getSearchList()
  }else{
    getGearSearchList()
  }
}

// 详情
const checkDetails = async (row: any) => {
  data.checkedItem = row
  data.isShowDetails = true
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const OperatorRef = ref<any>()
const GameItemRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.isShowDetails = false
  data.isUserDetails = false
  data.dialogVisible = false
  data.list = [] as any
  data.total = 0
  data.waterXAxis = [] as any
  data.waterSeries = [] as any
  if (show) { 
    data.query = {
      page: 1,
      size: 50,
      agent_id: -1,
      operated_id: -1,
      platform: -1,
      game_id: -1,
      currency_id: -1,
      region: '',
      bet: 0,
      date: [getDateDay(0), getDateDay(0)]
    }
    OperatorRef.value.onHideDetails(-1)
    GameItemRef.value.onHideDetails(-1)
  }
}
</script>

<style scoped lang="scss">
.padding20 {
  padding-top: 10px;
  background-color: var(--background) !important;
}
</style>
